/* eslint-disable no-param-reassign */
import React, { Component } from 'react';
import { Tree, Button, Form } from 'antd';
// import * as config from '../../../utils/config';
import styles from './Tree.css';
// import * as commonFunc from '../commonFunc';

const { TreeNode } = Tree;
const FormItem = Form.Item;


class TreeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name,
      treeData: props.treeData || [],
      sShowName: 'sShowName',
      sKeyName: 'key',
      autoExpandParent: true,
      showLine: true,
      checkable: true,
      disabled: false,
      isSearchShow: false, // 是否可以搜索 ，默认不可以进行搜索
      allCheckKeys: props.allCheckKeys,
      checkedKeys: props.checkedKeys,
      expandedKeys: props.expandedKeys,
      disabledCheckedKeys: props.disabledCheckedKeys,
    };
  }
  componentWillMount() {
    this.assignmentWillProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.assignmentWillProps(nextProps);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const {
      name, selectedKeys, checkedKeys, sShowName, sKeyName, treeData, expandedKeys, disabled, disabledCheckedKeys,
    } = this.state;
    return disabled !== nextState.disabled || name !== nextState.name || sShowName !== nextState.sShowName || sKeyName !== nextState.sKeyName ||
      JSON.stringify(disabledCheckedKeys) !== JSON.stringify(nextState.disabledCheckedKeys) ||
      JSON.stringify(treeData) !== JSON.stringify(nextState.treeData) ||
      JSON.stringify(checkedKeys) !== JSON.stringify(nextState.checkedKeys) ||
      JSON.stringify(expandedKeys) !== JSON.stringify(nextState.expandedKeys) ||
      JSON.stringify(selectedKeys) !== JSON.stringify(nextState.selectedKeys);
  }

  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  /**   获取tree 对象的props   */
  getTreeProps = () => {
    const {
      checkable, disabled, showLine, checkedKeys, isSearchShow, selectedKeys, disabledCheckedKeys, expandedKeys, autoExpandParent,
    } = this.state;
    return {
      autoExpandParent,
      checkable,
      disabled,
      showLine,
      className: 'hide-file-icon',
      checkedKeys,
      selectedKeys,
      isSearchShow,
      disabledCheckedKeys,
      expandedKeys,
      onCheck: this.checkBoxCheck,
      onExpand: this.onExpand,
    };
  };

  assignmentWillProps = (props) => {
    this.setState({
      name: props.name,
      checkable: props.checkable,
      disabled: props.disabled,
      checkedKeys: props.checkedKeys,
      selectedKeys: props.selectedKeys,
      treeData: props.treeData,
      allCheckKeys: props.allCheckKeys,
      sShowName: props.sShowName,
      sKeyName: props.sKeyName,
      showLine: props.showLine,
      isSearchShow: props.isSearchShow,
      disabledCheckedKeys: props.disabledCheckedKeys,
    });
  }

  handleButtonClick = (e, child) => {
    const { allCheckKeys } = this.state;
    const stateValue = {};
    if (child === 'expandAll') {
      stateValue.expandedKeys = allCheckKeys;
    } else if (child === 'unExpand') {
      stateValue.expandedKeys = [];
    } else if (child === 'checkedAll') {
      stateValue.checkedKeys = allCheckKeys;
    } else if (child === 'unChecked') {
      stateValue.checkedKeys = [];
    }
    this.setState(stateValue);
  }


  checkBoxCheck = (checked, e) => {
    this.props.onCheck(checked, e);
  }
  renderTreeNodesType = (item) => {
    const { checkedKeys, disabledCheckedKeys } = this.props;
    const showType = {};
    for (const ckey of checkedKeys) {
      if (ckey === item.key) {
        showType.checked = true;
        break;
      }
    }
    for (const dkey of disabledCheckedKeys) {
      if (dkey === item.key) {
        showType.disabled = true;
        break;
      }
    }
    return showType;
  }

  renderTreeNodes = (data) => {
    const { sShowName, sKeyName } = this.props;
    return data.map((item) => {
      if (item.children.length > 0) {
        return (
          <TreeNode
            title={item[`${sShowName}`]}
            key={item[`${sKeyName}`]}
            treeRef={item}
            {... this.renderTreeNodesType(item)}
          >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return (<TreeNode
        title={item[`${sShowName}`]}
        key={item[`${sKeyName}`]}
        treeRef={item}
        {... this.renderTreeNodesType(item)}
      />);
    });
  }
  render() {
    const treeProps = this.getTreeProps();
    return (
      <FormItem className={styles.subForm}>
        <div className={styles.tableOption}>
          <div type="flex" style={{ height: '400px', overflow: 'auto' }} >
            <Tree {...treeProps} >
              {this.renderTreeNodes(this.props.treeData)}
            </Tree>
          </div>
          <div className={styles.advCol} >
            <Button onClick={e => this.handleButtonClick(e, 'checkedAll')}>全选</Button>
            <Button onClick={e => this.handleButtonClick(e, 'unChecked')}>全部不选</Button>
            <Button onClick={e => this.handleButtonClick(e, 'expandAll')}>全部展开</Button>
            <Button onClick={e => this.handleButtonClick(e, 'unExpand')}>全部折叠</Button>
          </div>
        </div>
      </FormItem>
    );
  }
}

export default TreeComponent;
